<template>
  <div class="quote-price-container">
    <searchBox>
      <template #yyxbread>
        <div style="display: flex; align-items: center">
          <el-icon>
            <Location />
          </el-icon>
          <span class="f12 ml10 mr10">当前位置：</span>
          <el-breadcrumb separator="/" class="f14">
            <el-breadcrumb-item class="active" style="color: #1d2129; font-weight: bold">预算报价</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </template>
    </searchBox>
    <div class="content">
      <el-container>
        <el-main>
          <div class="search-wrap">
            <el-input
              class="jzt-searchkey-com"
              v-model="paramsForm.content"
              style="max-width: 600px; background-color: white"
              placeholder="输入预算套餐名称、风格、或套餐包含标签"
            >
              <template #append>
                <el-button :icon="Search" size="small" @click="getshangpinlist">搜索</el-button>
              </template>
            </el-input>
          </div>
          <div class="list-warp">
            <div class="item">
              <!-- query: { templateId: item.budgetTemplateId } } -->
              <el-col v-for="(item, index) in list" :key="index">
                <div class="box" @click.stop="toProdDetail(item)">
                  <el-image :src="item.images" :alt="item.title" :title="item.title" class="img" lazy :fit="cover" />

                  <div class="bottom-wrap" @click.stop="navigateToDetails(item)">
                    <div class="info">
                      <div class="title text-over">{{ item.title }}</div>
                      <div class="price">
                        套餐一口价：<span class="jzt-din-bold f16">￥{{ item.price || "--" }}</span>
                      </div>
                    </div>
                    <div class="bottom" v-if="isActivityActive(item.ovTime)">
                      <count-down :endTime="item.ovTime" :callback="callback" endText="已经结束了"></count-down>
                    </div>
                    <div class="bottom" v-if="!isActivityActive(item.ovTime)"></div>

                    <div class="mask">
                      <div class="t mb32">套餐包含</div>
                      <div class="c-list">
                        <div class="c-item" v-for="(v, i) in item.classify" :key="i" @click.stop="toDetail(item, v)">
                          {{ v.spaceName }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="tags">{{ item.tags }}</div>
                </div>
              </el-col>
            </div>

            <div class="jzt-flex-center mt20">
              <el-pagination
                class="jzt-pagination"
                background
                v-model:current-page="pagination.currentPage"
                v-model:page-size="pagination.pageSize"
                :page-sizes="[10, 20, 30, 40]"
                :size="pagination.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { ElMessage } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import { getCustomList, crateBudgetQuotation, budgetCustomerList } from "@/apis/quote-price/following";
import { getPackCombinelist } from "@/apis/combo-price/index";
import searchBox from "@/views/home/components/search";
import countDown from "./components/countDown.vue";
import useManageStore from "@/store/modules/manage";
import { selectDictDataByType } from "@/apis/dict/dict";
import { Search } from "@element-plus/icons-vue";

const manageStore = useManageStore();
const router = useRouter();
const route = useRoute();
const paramsOption = ref({});
// 商品列表
const list = ref([]);
const searchkey = ref("");
const customKey = ref("");
const customList = ref([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }]); //关联客户列表
const currObj = ref({ customerId: null });
const paramsForm = ref({
  content: ""
});
const pagination = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0
});
const bundStyle = ref("");
onMounted(() => {
  const dictArr = ["shop_product_style"];
  dictArr.forEach(item => {
    getDict(item);
  });

  budgetCustomerListFun(); //查询报价列表
  getshangpinlist();
});

const toDetail = (item, spaceObj) => {
  //打开新页签
  const routeUrl = router.resolve({
    path: "/combo-price/details",
    query: { templateId: item.budgetTemplateId, ovTime: item.ovTime, combineId: item.combineId, spaceId: spaceObj.spaceId }
  });
  window.open(routeUrl.href, "_blank");
};

const toProdDetail = obj => {
  const routeUrl = router.resolve({
    path: "/shopDetail/index",
    query: {
      id: obj.productId
    }
  });
  window.open(routeUrl.href, "_blank");
};

const handleSizeChange = val => {
  pagination.value.size = val;
  getshangpinlist();
};
const handleCurrentChange = val => {
  pagination.value.currentPage = val;
  getshangpinlist();
};

const isActivityActive = time => {
  const endDate = Date.parse("2099-12-30 23:59:59");
  return time < endDate;
};
/**
 * 获取列表选项字典
 * @param {*} dictType 字典类型
 */
const getDict = async dictType => {
  const res = await selectDictDataByType(dictType);
  paramsOption.value[dictType] = res.data;
};
const getshangpinlist = async () => {
  bundStyle.value = "";
  if (paramsForm.value.content == "现代") {
    bundStyle.value = "1";
    paramsForm.value.content = "";
  }
  if (paramsForm.value.content == "复古") {
    bundStyle.value = "2";
    paramsForm.value.content = "";
  }

  const res = await getPackCombinelist({
    current: pagination.value.currentPage,
    size: pagination.value.pageSize,
    content: paramsForm.value.content,
    bundStyle: bundStyle.value
  });
  if (res.code === 200) {
    pagination.value.total = res.data.total;
    list.value = res.data.records.map(item => {
      return {
        images: item.coverImgUrl,
        budgetTemplateId: item.budgetTemplateId,
        combineId: item.combineId,
        title: item.bundleName,
        price: item.fixedPrice,
        ovTime: gettimestamp(item.activityEndDate),
        tags: getTags(item.bundleStyle),
        classify: item.spaceList
      };
    });
  }
};
//获取tags
const getTags = tags => {
  return paramsOption.value.shop_product_style.find(item => item.dictValue == tags).dictLabel;
};
//字符串2024-10-30 12:00:00格式获取时间戳
const gettimestamp = dateString => {
  return new Date(dateString).getTime();
};

const navigateToDetails = item => {
  //打开新页签
  const routeUrl = router.resolve({
    path: "/combo-price/details",
    query: { templateId: item.budgetTemplateId, ovTime: item.ovTime, combineId: item.combineId }
  });
  window.open(routeUrl.href, "_blank");
};
//查询预算报价列表
const budgetCustomerListFun = () => {
  return;
  budgetCustomerList({ ysState: 1, search: searchkey.value }).then(res => {
    if (res.code === 200) {
      list.value = res.data || [];
      manageStore.followingTotal = list.value.length;
    }
  });
};
// 倒计时
const countdown = endDate => {
  const countDownDate = new Date(endDate).getTime();
  // 更新倒计时并每秒更新显示
  const interval = setInterval(function () {
    const now = new Date().getTime();
    const distance = countDownDate - now;
    // 如果倒计时已经结束，清除interval
    if (distance < 0) {
      clearInterval(interval);
      console.log("倒计时已经结束");
      return;
    }

    // 计算时间差的天、小时、分钟和秒
    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // 输出到控制台或者页面显示
    console.log("倒计时：" + days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒 ");
  }, 1000);
};
</script>

<style lang="scss">
.following-custom-dialog {
  .dialog-content {
    height: 500px;
    overflow-y: auto;
    & > div > p {
      color: #3d3d3d;
      margin-bottom: 10px;
    }
    .search-wrap {
      display: flex;
      .el-button {
        margin-left: 4px;
      }
    }
    .add-custom.el-button:hover {
      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
    }
    .custom-list {
      padding: 20px;
      border: 1px solid #e1e6ed;
      .custom-item {
        border: 1px solid #e1e6ed;
        padding: 16px;
        margin-bottom: 10px;
        position: relative;
        border-radius: 4px;
        cursor: pointer;
        h3 {
          color: #1d2129;
          font-weight: normal;
          b {
            font-weight: normal;
          }
          i {
            font-style: normal;
            font-size: 12px;
          }
        }
        .active-icon {
          position: absolute;
          font-size: 20px;
          right: 36px;
          top: calc(50% - 10px);
        }
        &.active {
          border-color: transparent;
          background: #eef1f4;
          box-shadow: 0px 0px 8px 0px rgba(4, 54, 114, 0.2);
        }
      }
    }
  }
}
.following-custom-popper.el-popper {
  width: 144px;
  padding: 16px !important;
  color: black;
}
</style>
<style lang="scss" scoped>
:deep(.side) {
  border-radius: 10px 0 0 10px;
}
.el-button--primary {
  --el-button-bg-color: #424e66;
  border: none;
}
.el-button.el-button--info {
  --el-color-info: #f2f3f5;
  --el-color-white: #1d2129;
  &:hover {
    --el-button-hover-bg-color: #f2f3f5 !important;
    border-color: #f2f3f5 !important;
  }
}
.quote-price-container {
  margin-top: 114px;
  height: calc(100vh - 140px);
  box-sizing: border-box;
  display: flex;
  :deep(.l-search) {
    & > div > span {
      font-size: 14px !important;
    }
  }
  :deep(.el-breadcrumb__inner) {
    color: #1d2129;
    font-weight: bold;
  }

  .content {
    width: 100%;
    padding: 0 20px;
    // padding-top: 20px;
    .side {
      width: 200px;
      padding-top: 20px;
      :deep(.menu-item) {
        &:first-of-type {
          display: none;
        }
      }
    }
    :deep(.el-container) {
      // box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
      height: calc(100%);
      .el-main {
        border-radius: 0 10px 10px 0;
        // border-left: 1px solid #e1e6ed;
        padding: 0;
        .search-wrap {
          // background-color: white;
          padding: 3px;
          // position: sticky;
          // top: 20px;
          width: 444px;
          margin-top: 20px;
          box-sizing: border-box;
          z-index: 2;
          border-radius: 16px 16px 16px 16px;
          margin-bottom: 15px;
        }
        .list-warp {
          // padding: 20px 10px 0 10px;
          .img {
            width: 100%;
            height: 250px;
            border-radius: 10px 10px 10px 10px;
            img {
              object-fit: cover;
            }
          }
          .item {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(325px, 1fr));
            grid-gap: 20px;
          }
          .box {
            cursor: pointer;
            background-color: white;
            min-height: 396px;

            border-radius: 10px;
            border: 1px solid #e5e8ef;
            box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
            box-sizing: border-box;
            position: relative;
            display: grid;
            grid-template-rows: 250px 1fr;
            .tags {
              position: absolute;
              left: 6px;
              top: 12px;
              width: 90px;
              height: 28px;
              line-height: 28px;
              background: rgba(150, 150, 150, 0.5);
              border-radius: 16px 16px 16px 16px;
              border: 1px solid #ffffff;
              color: #fff;
              z-index: 10;
              text-align: center;
              backdrop-filter: blur(4px);
              display: block;
            }
            .info {
              height: 90px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              box-sizing: border-box;
              background-color: red;
              padding: 20px 16px 16px 16px;
              background-color: #fff;
              position: relative;
              .title {
                font-weight: 700;
                font-size: 16px;
                color: #3d3d3d;
                line-height: 24px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                text-align: center;
                max-width: 300px;
                font-family: "Microsoft YaHei";
              }
              .price {
                font-weight: 400;
                font-size: 14px;
                color: #4e5969;
                text-align: center;
                margin-top: 8px;
                line-height: 24px;
                font-family: "Microsoft YaHei";
              }
            }
            .bottom {
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              .djs {
                width: 100%;
                height: 50px;
                background: #272636;
                border-radius: 0px 0px 10px 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .l {
                  font-size: 14px;
                  color: #ffffff;
                  margin-left: 20px;
                }
                .r {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  margin-right: 20px;
                  .txt {
                    padding: 0 10px;
                    height: 24px;
                    line-height: 24px;
                    background: #f6f8fa;
                    border-radius: 4px 4px 4px 4px;
                  }
                  .t {
                    color: #fff;
                    padding: 0 5px;
                  }
                  .day {
                    color: #ff3333;
                    margin-right: 10px;
                  }
                }
              }
            }
            .bottom-wrap:hover .mask {
              display: block;
            }
            .bottom-wrap:hover + .tags {
              display: none;
            }
          }
          .mask {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 10px 10px 10px 10px;
            display: none;
            backdrop-filter: blur(4px);
            .t {
              color: #fff;
              font-size: 18px;
              margin-top: 20px;
              text-align: center;
              font-weight: 700;
            }
            .c-list {
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              gap: 12px 20px;
              padding: 0 15px;
              .c-item {
                width: 100%;
                height: 32px;
                line-height: 32px;
                text-align: center;
                background: #f2f3f5;
                border-radius: 4px 4px 4px 4px;
                // border: 1px solid #ffffff;
                font-size: 12px;
                color: #4e5969;
              }
              .c-item:hover {
                background: #4e5969;
                cursor: pointer;
                color: #fff;
              }
            }
          }
        }
      }
    }
    :deep(.jzt-searchkey-com .el-input__inner) {
      background: white !important;
    }
    :deep(.jzt-searchkey-com .el-input__count) {
      background: white !important;
    }
    :deep(.jzt-searchkey-com .el-input__wrapper) {
      background: white !important;
      // box-shadow: none !important;
    }
  }
}
</style>
